<template>
  <div class="logon">
    <div v-if="$route.query.notice">{{ $route.query.notice }}</div>
    <div class="logon-content">
      <!--      <img src="src/assets/logon.jpeg" />-->
      <div class="image"></div>
      <!--      <img src="@/assets/logon.jpeg" alt="图片缺失" />-->
      <el-form
        ref="account"
        class="account"
        :model="account"
        :rules="rules"
        label-position="right"
        label-width="auto"
      >
        <!--        <el-form-item prop="username">-->
        <!--          <el-autocomplete-->
        <!--            ref="username"-->
        <!--            v-model.trim="account.username"-->
        <!--            placeholder="请输入用户名"-->
        <!--            :fetchSuggestions="suggestAccounts"-->
        <!--            @select="selectAccount"-->
        <!--          >-->
        <!--            <template #default="that">-->
        <!--              <span class="username-suggestions">-->
        <!--                <div>{{ that.item.username }} == {{ that.item.password }}</div>-->
        <!--                <div @click.stop="removeAccountFromLocalAccounts(that.item)">-->
        <!--                  <i class="el-icon-remove"></i>-->
        <!--                </div>-->
        <!--              </span>-->
        <!--            </template>-->
        <!--          </el-autocomplete>-->
        <!--        </el-form-item>-->
        <el-form-item prop="username">
          <el-autocomplete
            ref="username"
            v-model.trim="account.username"
            placeholder="请输入用户名"
            :fetchSuggestions="suggestAccounts"
            @select="selectAccount"
          >
            <template #default="that">
              <span class="username-suggestions">
                <div>{{ that.item.username }} == {{ that.item.password }}</div>
                <div @click.stop="removeAccountFromLocalAccounts(that.item)">
                  <i class="el-icon-remove"></i>
                </div>
              </span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="account.password"
            placeholder="请输入密码"
          >
          </el-input>
        </el-form-item>

        <el-form-item class="logon-button-item">
          <el-button
            class="logon-button"
            type="primary"
            @click="accountSubmit()"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
import { auth } from "@/api";
export default {
  name: "LogonPage",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      account: {
        username: null,
        password: null,
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    accounts() {
      return this.$store.state.accounts;
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    login() {
      // this.$router.push("/home");
      // this.$router.push({
      //   name: "home",
      //   params: {
      //     userinfo: "lisi",
      //     age: 12,
      //   },
      // });
      sessionStorage.setItem("userinfo", JSON.stringify(this.account));
      this.$store.dispatch("axiosShoppingStates");
      this.$router.push({
        path: "/home",
        query: {
          userinfo: "lisi",
          age: 12,
        },
      });
    },
    accountSubmit() {
      // this.$http({
      //   method: "post",
      //   url: "http://localhost:9090/login",
      //   data: `username=${this.account.username}&password=${this.account.password}`,
      // })
      auth.login(this.account).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.$store.commit("updateUserInfo", this.account.username);
          this.$store.dispatch("axiosShoppingStates");
          this.$nextTick(() => {
            this.$router.push({
              path: "/home",
            });
          });
        },
        (error) => {
          console.log(".account request error : " + error.response.status);
          this.$message.error(error.response.data);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->

<style lang="scss" scoped>
@import "src/styles";
.logon {
  //background-color: rgba(216, 139, 19, 0.14);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.account {
  width: 300px;
  margin-left: 48px;
  margin-right: 48px;
}
.logon-button {
  width: 100%;
}
.logon-button-item {
  margin-top: 60px;
}
.logon-content {
  display: flex;
  align-items: center;
  //padding-right: 20px;
  box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.4);
  //img {
  //  width: 500px;
  //  margin-right: 30px;
  //}
}
.image {
  width: 500px;
  height: 500px;
  background-image: url("~@/assets/logon.jpeg");
  background-size: contain;
  background-repeat: no-repeat;
}
.username-suggestions {
  color: $--color-primary;
  font: italic bold 16px/28px "楷体";
  display: flex;
  justify-content: space-between;
}
.el-autocomplete {
  width: 100%;
}
</style>
